<template>
    <div class="wrap">
        <div class="table-main">
            <el-button type="primary" @click="newArea" icon="el-icon-circle-plus-outline"
                       style="margin-bottom: 15px;float: right">新增区域
            </el-button>
            <el-table style="width: 100%" :data="areaData" border :cell-style="rowStyle">
                <el-table-column label="序号" width="55" header-align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="区域名称"
                        width="160" header-align="center">
                </el-table-column>
                <el-table-column
                        prop="limitNum"
                        label="人数上限"
                        width="120" header-align="center">
                </el-table-column>
                <el-table-column
                        prop="current"
                        label="当前人数"
                        width="120" header-align="center">
                </el-table-column>
                <el-table-column
                        label="出场登记"
                        width="200" header-align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;justify-content: space-between;align-items: center">
                            <el-input-number size="mini" v-model="scope.row.outNum"
                                             :min="1"
                                             :max="scope.row.current" label="出场人数"></el-input-number>
                            <el-button size="mini" style="margin-left: 10px" @click="register(scope.row)">签出</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200" header-align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;justify-content: space-around;align-items: center">
                            <el-button size="mini" @click="updateArea(scope.row)">修改</el-button>
                            <el-button size="mini" type="danger" @click="removeArea(scope.row.id)">停用</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <AreaUpdate :updateForm="updateForm" :updateAreaShow="updateAreaShow" @updateSuccess="updateSuccess"
                    @cancel="updateAreaShow=false"/>
        <NewArea :saveNewAreaShow="saveNewAreaShow" @cancel="saveNewAreaShow=false" @saveSuccess="saveSuccess"/>
    </div>
</template>

<script>
    import {getAllArea, registerOut, removeArea} from "@/utils/apis/area";
    import NewArea from "@/components/area/NewArea";
    import AreaUpdate from "@/components/area/AreaUpdate";

    export default {
        name: "AreaList",
        data() {
            return {
                areaData: [],
                updateForm: {},
                saveNewAreaShow: false,
                updateAreaShow: false
            }
        },
        components: {AreaUpdate, NewArea},
        created() {
            this.initData()
        },
        computed: {},
        methods: {
            //初始化数据
            initData() {
                const loading = this.$loading({
                    lock: true,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                getAllArea().then(res => {
                    if (res.data.code === 200) {
                        let list = res.data.data
                        list.forEach(item => {
                            item.outNum = 1
                        })
                        this.areaData = list
                    }
                    loading.close()
                })
            },
            //表格文字居中
            rowStyle() {
                return "text-align:center";
            },
            //新增员工
            newArea() {
                this.saveNewAreaShow = true
            },
            //登记人员出场
            register(row) {
                this.$confirm('操作不可逆,是否确认?', '签出提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    registerOut(row.name, row.outNum).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success('签出成功')
                            this.initData()
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消签出'
                    });
                })
            },
            //添加成功区域后的回调
            saveSuccess() {
                //更新数据
                this.initData()
                //关闭弹窗
                this.saveNewAreaShow = false
            },
            //修改成功后的回调
            updateSuccess() {
                this.initData()
                this.updateAreaShow = false
            },
            //移除区域
            removeArea(id) {
                this.$confirm('停用不可逆,是否确认?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeArea(id).then(res => {
                        console.log(res.data)
                        if (res.data.code === 200) {
                            //更新数据
                            this.initData()
                            this.$message.success('删除成功')
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消停用'
                    });
                })
            },
            //修改区域信息
            updateArea(row) {
                this.updateForm = {
                    id: row.id,
                    name: row.name,
                    limitNum: row.limitNum
                }
                this.updateAreaShow = true
            }
        }
    }
</script>

<style scoped>
    .wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-main {
        width: 856px;
        margin-top: 20px;
    }
</style>